<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="js/vue2.7.js" type="text/javascript" charset="UTF-8"></script>
    <script src="js/elementui.js" type="text/javascript" charset="UTF-8"></script>
    <script src="js/axios.min.js" type="text/javascript" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/ui.css">

    <style type="text/css">
        #app{
            width: 350px;
            height: 200px;
            border: 1px solid #8C939D;
            border-radius: 5px;
            text-align: center;
            margin: 200px auto;
        }
    </style>

</head>
<body>
    <div id="app">
        <br>
        账号：<el-input v-model="uname"  placeholder="请输入内容" style="width: 70%;" clearable></el-input>
        <br><br>
        密码：<el-input placeholder="请输入密码" v-model="upass" show-password style="width: 70%;"></el-input>
        <br><br>
        <el-button type="primary" @click="submit()">登录</el-button>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                uname:"",
                upass:""
            },
            methods:{
                submit(){
                    //alert(this.uname+"------"+this.upass)
                    if(this.uname=="xiaomu"&&this.upass=="hahaha"){
                        location.href="home .html"      //跳转页面
                    }else{
                        alert("账号或密码错误")
                    }
                }
            }
        })
    </script>
</body>
</html>